<template>
<!--<top-header/>-->
<div class="container">
    <el-row>
        <el-col :span="24" class="user_top">

            <div class="user_img">
                <div class="user_con">
                    <div class="child"><img style="width: 60px; height: 60px" :src="userdata.user.userimgurl" /></div>
                    <div class="child"><el-text class="mx-1" size="large">{{userdata.user.personname}}</el-text></div>
                </div>
            </div>
        </el-col>
    </el-row>
    <!-- 两行布局 -->
    <el-row>
        <el-col :span="12">
            <div class="grid-content" >
                <el-text class="mx-1" size="large">Basic information</el-text>
                <div class="grid-border">
                    <el-icon><Avatar /></el-icon>
                    <el-input placeholder="username" name="username" type="text" disabled v-model="userdata.user.username" />
                    <el-icon><Avatar /></el-icon>
                    <el-input placeholder="personname" name="personname" type="text" v-model="userdata.user.personname" />
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content" >
                <el-text class="mx-1" size="large">Confact information</el-text>
                <div class="grid-border">
                    <el-icon><Iphone /></el-icon>
                    <el-input placeholder="phone" name="phone" type="text" v-model="userdata.user.phone" />
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <div class="grid-content" >
                <el-text class="mx-1" size="large">Address information</el-text>
                <div class="grid-border">
                    <el-icon><OfficeBuilding /></el-icon>
                    <el-input placeholder="credentials" name="credentials" type="text" v-model="userdata.user.credentials" />
                </div>
            </div>
        </el-col>
    </el-row>
</div>
<!-- 底部信息 -->
<!--<top-bottom/>-->
</template>
<script setup>
import TopHeader from '../components/TopHeader.vue' // 引用Header组件
import TopBottom from '../components/TopBottom.vue' // 引用Header组件
import { reactive,onMounted} from 'vue'
import { getMyInfo } from '../api/user'

const userdata = reactive({
    user:{
        userimgurl: 'src/assets/image/user.png',
        username:'',
        personname: ' ',
        phone:'',
        credentials:''//地址
    }
})

onMounted(() => {
  loaddata();
})

function loaddata()
{
    getMyInfo().then((res) => {
    if (res.code == 200)
    {
        console.log("abc --- "+res.data.username);
        userdata.user = res.data;
    }
  })
}
</script>
<style lang="less" scoped>

.user_top{
    text-align:center;
    margin-top: 20px;
}
.user_img{
    display:inline-block;
}
.user_img img{
    border-radius: 50%; /* 圆形 */
}
.user_con{
    text-align: center; /* 水平居中 */
}
.child {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}
.grid-content{
    padding: 60px 60px 10px 60px;
}
.grid-border{
    padding:10px;
    margin-top: 10px;
    border: 1px solid black; /* 1px宽，实线，黑色边框 */
    // min-height: 200px;
}
</style>
